import {html} from 'lit';
import {Meta, Canvas, ArgsTable, Story} from '@storybook/addon-docs';
import { UPDATE_STORY_ARGS } from "@storybook/core-events";

<Meta
		title="Components/Table"
		component="bl-table"
		argTypes={{
			headers: {
				control: 'text',
				type: 'array',
			},
			rows: {
				control: 'text',
				type: 'array',
			},
		}}
/>

export const TableTemplate = (args, {id}) => {
	const updateArgs = (_args)=>{
		window.__STORYBOOK_ADDONS_CHANNEL__.emit(UPDATE_STORY_ARGS, {
			storyId: id,
			updatedArgs: _args,
		});

	}
	let {data, headers, selectValue, sortedData} = args;
  const tableData = sortedData || data;
	const onSort = (event) => {
		const [sortKey, sortDirection] = event.detail;
    const columnType = sortKey==="id" ? "number" : "string";
		updateArgs({
			...args,
			sortedData: (sortKey&&sortDirection)? [...data].sort((a, b) => {
        if (columnType === 'string') {
          return a[sortKey].localeCompare(b[sortKey], 'tr', { sensitivity: 'base' }) * (sortDirection === 'asc' ? 1 : -1);
        }
        if (a[sortKey] < b[sortKey]) {
          return sortDirection === 'asc' ? -1 : 1;
        }
        if (a[sortKey] > b[sortKey]) {
          return sortDirection === 'asc' ? 1 : -1;
        }
        return 0;
			}) : [...data],
		});
	}
	const onRowSelect = (event) => {
		updateArgs({
			...args,
			selectValue: event.detail,
		});
	}

	return html`
      <div style="height: 400px;">
          <bl-table
                  selected=${JSON.stringify(selectValue)}
                  ?selectable=${args.selectable}
                  ?multiple=${args.multiple}
                  ?sortable=${args.sortable}
                  ?sticky-first-column=${args.stickyFirstColumn}
                  ?sticky-last-column=${args.stickyLastColumn}
                  sort-key='${args.sortKey}'
                  sort-direction='${args.sortDirection}'
                  @bl-sort=${onSort}
                  @bl-row-select=${onRowSelect}
          >
              <bl-table-header ?sticky=${args.stickyHeader}>
                  <bl-table-row>
										${args.headers.map((header) =>
												html`
                            <bl-table-header-cell
                                    ?sortable=${header.sortable}
                                    sort-key='${header.sortKey}'
                                    style='${header.width ? '--bl-table-header-cell-width: ' + header.width + ';' : ''} ${header.minWidth ? '--bl-table-header-cell-min-width: ' + header.minWidth + ';' : ''}'
                            >
															${header.text}
                              ${header.tooltip &&
                                html`<div style="margin-inline-start: 12px;">
                                  <bl-tooltip>
                                    <bl-icon slot="tooltip-trigger" name="info"></bl-icon>
                                    ${header.tooltip}
                                  </bl-tooltip>
</div>`}
                            </bl-table-header-cell>`
										)}
                  </bl-table-row>
              </bl-table-header>
              <bl-table-body>${tableData.map((row) =>
										html`<bl-table-row selection-key="row-${row.id}">
													${headers.map((header, col_idx) =>
															html`<bl-table-cell ?disabled=${col_idx === 0 && row.disabled}> ${row[header.key]}</bl-table-cell>`
													)}
                        </bl-table-row>`
								)}</bl-table-body>
          </bl-table>
      </div>
	`;
}

export const TableWithPaginationTemplate = (args, {id}) => {
	const updateArgs = (_args)=>{
		window.__STORYBOOK_ADDONS_CHANNEL__.emit(UPDATE_STORY_ARGS, {
			storyId: id,
			updatedArgs: _args,
		});
	}

  const { paginationData, page, perPage } = args;

  const paginatedData = paginationData.slice((page - 1) * perPage, page * perPage);

  const handlePaginationChange = (e) => {
    updateArgs({
      ...args,
      page: e.detail.selectedPage,
      perPage: e.detail.itemsPerPage,
    });
  }

  return html`
    ${TableTemplate({...args, data: paginatedData}, {id})}

    <div style="margin-top: var(--bl-size-xl); float: right" >
      <bl-pagination current-page="1" total-items="${paginationData.length}" has-jumper has-select @bl-change="${handlePaginationChange}"></bl-pagination>
    </div>
  `;
}

export const NoDataTableTemplate = (args) => {
  const { headers, noDataContent } = args;
  
  return html`
    <div style="height: 400px;">
      <bl-table>
        <bl-table-header sticky>
          <bl-table-row>
            ${headers.map((header) =>
              html`<bl-table-header-cell
                style="${header.width ? '--bl-table-header-cell-width: ' + header.width + ';' : ''} ${header.minWidth ? '--bl-table-header-cell-min-width: ' + header.minWidth + ';' : ''}"
                ?sortable="${header.sortable || false}"
                sort-key="${header.sortKey || ''}"
              >
                ${header.text}
              </bl-table-header-cell>`
            )}
          </bl-table-row>
        </bl-table-header>
        <bl-table-body>
          ${noDataContent ? html`
            <div slot="no-data">
              ${noDataContent}
            </div>
          ` : ''}
        </bl-table-body>
      </bl-table>
    </div>
  `;
}

# Table Component

<bl-badge icon="check_fill">RTL Supported</bl-badge>

Table is a component to visualize a data set in rows and columns. It needs to be used with `bl-table-header`, `bl-table-body`, `bl-table-row`, `bl-table-header-cell`, `bl-table-cell` component.

<Canvas>
  <Story name="Basic Usage" args={{
    selectable: true,
    multiple: true,
    sortable: true,
    stickyFirstColumn: true,
    stickyLastColumn: true,
    headers: [
      {key: "id", sortKey: "id", text: "ID", minWidth: '100px', sticky:'left'},
      {key: "first_name", sortKey: "first_name", text: "First Name", minWidth: "100px"},
      {key: "last_name", sortKey: "last_name", text: "Last Name", width: "150px", minWidth: "100px"},
      {key: "email", text: "Email", width: "250px", minWidth: "250px"},
      {key: "gender", text: "Gender", width: '85px'},
      {key: "ip_address", text: "IP Address", width: '90px', sticky: 'right', tooltip: 'Ip address of end user'},
    ],
	  selectValue: ["row-1","row-4"],
    data: [
      {
        id: 1,
        first_name: "Antonella",
        last_name: "Bellefonte",
        email: "abellefonte0@nba.com",
        gender: "Female",
        ip_address: "193.108.174.118"
      },
      {id:2,first_name:"Wash",last_name:"Carnson",email:"wcarnson1@jalbum.net",gender:"Male",ip_address:"255.169.128.60"},
      {id:3,first_name:"Betteanne",last_name:"Cowgill",email:"bcowgill2@timesonline.co.uk",gender:"Female",ip_address:"235.237.3.233"},
      {id:4,first_name:"Lilith",last_name:"Astbury",email:"lastbury3@shinystat.com",gender:"Female",ip_address:"46.41.60.65"},
      {id:5,first_name:"Nikos",last_name:"Vasenkov",email:"nvasenkov4@slate.com",gender:"Male",ip_address:"13.95.130.24"},
      {id:6,first_name:"Drucill",last_name:"Runciman",email:"drunciman5@hc360.com",gender:"Female",ip_address:"185.192.50.41"},
      {id:7,first_name:"Gaspar",last_name:"Falls",email:"gfalls6@howstuffworks.com",gender:"Male",ip_address:"107.51.243.94"},
      {id:8,first_name:"Hilary",last_name:"Izzatt",email:"hizzatt7@java.com",gender:"Male",ip_address:"136.171.100.29"},
      {id:9,first_name:"Alonzo",last_name:"Beardwood",email:"abeardwood8@loc.gov",gender:"Male",ip_address:"110.116.212.242"},
      {id:10,first_name:"Jacky",last_name:"Clyant",email:"jclyant9@earthlink.net",gender:"Male",ip_address:"55.126.158.104"},
    ],
    stickyHeader:true
  }} argTypes={{
    headers: {table: {disable: true}},
    data: {table: {disable: true}},
    rows: {table: {disable: true}}
  }}>
    {TableTemplate.bind({})}
  </Story>
</Canvas>


# Row Selection

To enable row selection, set the `selectable` attribute on `<bl-table>`. This allows users to select rows. Listen for the `@bl-row-select` event to handle row selection changes. This event provides details about the selected rows, enabling actions or updates based on the user's selection.

<Canvas>
  <Story name="Row Selection" args={{
    selectable: true,
    multiple: false,
    sortable: false,
    stickyFirstColumn: false,
    stickyLastColumn: false,
    headers: [
      {key: "id", sortKey: "id", text: "ID", minWidth: '100px', sticky:'left'},
      {key: "first_name", sortKey: "first_name", text: "First Name", minWidth: "200px"},
      {key: "last_name", sortKey: "last_name", text: "Last Name", minWidth: "200px"},
      {key: "email", text: "Email", minWidth: "250px"},
      {key: "gender", text: "Gender", minWidth: '200px'},
      {key: "ip_address", text: "IP Address", width: '90px', sticky: 'right'},
    ],
    selectValue: [],
    data: [
      {
        id: 1,
        first_name: "Antonella",
        last_name: "Bellefonte",
        email: "abellefonte0@nba.com",
        gender: "Female",
        ip_address: "193.108.174.118"
      },
      {id:2,first_name:"Wash",last_name:"Carnson",email:"wcarnson1@jalbum.net",gender:"Male",ip_address:"255.169.128.60"},
      {id:3,first_name:"Betteanne",last_name:"Cowgill",email:"bcowgill2@timesonline.co.uk",gender:"Female",ip_address:"235.237.3.233", disabled: true},
      {id:4,first_name:"Lilith",last_name:"Astbury",email:"lastbury3@shinystat.com",gender:"Female",ip_address:"46.41.60.65"},
      {id:5,first_name:"Nikos",last_name:"Vasenkov",email:"nvasenkov4@slate.com",gender:"Male",ip_address:"13.95.130.24"},
      {id:6,first_name:"Drucill",last_name:"Runciman",email:"drunciman5@hc360.com",gender:"Female",ip_address:"185.192.50.41"},
      {id:7,first_name:"Gaspar",last_name:"Falls",email:"gfalls6@howstuffworks.com",gender:"Male",ip_address:"107.51.243.94"},
      {id:8,first_name:"Hilary",last_name:"Izzatt",email:"hizzatt7@java.com",gender:"Male",ip_address:"136.171.100.29"},
      {id:9,first_name:"Alonzo",last_name:"Beardwood",email:"abeardwood8@loc.gov",gender:"Male",ip_address:"110.116.212.242"},
      {id:10,first_name:"Jacky",last_name:"Clyant",email:"jclyant9@earthlink.net",gender:"Male",ip_address:"55.126.158.104"},
    ],
    stickyHeader:false
  }} argTypes={{
    headers: {table: {disable: true}},
    data: {table: {disable: true}},
    rows: {table: {disable: true}}
  }}>
    {TableTemplate.bind({})}
  </Story>
</Canvas>

# Multiple Row Selection

To enable multiple row selection, set both `selectable` and `multiple` attributes on `<bl-table>`. This modification allows users to select or unselect all rows by using checkbox in header. The `@bl-row-select` event is also used here to handle changes in row selection, providing details about all selected rows.

<Canvas>
  <Story name="Multiple Row Selection" args={{
    selectable: true,
    multiple: true,
    sortable: false,
    stickyFirstColumn: false,
    stickyLastColumn: false,
    headers: [
      {key: "id", sortKey: "id", text: "ID", minWidth: '100px', sticky:'left'},
      {key: "first_name", sortKey: "first_name", text: "First Name", minWidth: "200px"},
      {key: "last_name", sortKey: "last_name", text: "Last Name", minWidth: "200px"},
      {key: "email", text: "Email", minWidth: "250px"},
      {key: "gender", text: "Gender", minWidth: '200px'},
      {key: "ip_address", text: "IP Address", width: '90px', sticky: 'right'},
    ],
    selectValue: [],
    data: [
      {
        id: 1,
        first_name: "Antonella",
        last_name: "Bellefonte",
        email: "abellefonte0@nba.com",
        gender: "Female",
        ip_address: "193.108.174.118"
      },
      {id:2,first_name:"Wash",last_name:"Carnson",email:"wcarnson1@jalbum.net",gender:"Male",ip_address:"255.169.128.60"},
      {id:3,first_name:"Betteanne",last_name:"Cowgill",email:"bcowgill2@timesonline.co.uk",gender:"Female",ip_address:"235.237.3.233", disabled: true},
      {id:4,first_name:"Lilith",last_name:"Astbury",email:"lastbury3@shinystat.com",gender:"Female",ip_address:"46.41.60.65"},
      {id:5,first_name:"Nikos",last_name:"Vasenkov",email:"nvasenkov4@slate.com",gender:"Male",ip_address:"13.95.130.24"},
      {id:6,first_name:"Drucill",last_name:"Runciman",email:"drunciman5@hc360.com",gender:"Female",ip_address:"185.192.50.41"},
      {id:7,first_name:"Gaspar",last_name:"Falls",email:"gfalls6@howstuffworks.com",gender:"Male",ip_address:"107.51.243.94"},
      {id:8,first_name:"Hilary",last_name:"Izzatt",email:"hizzatt7@java.com",gender:"Male",ip_address:"136.171.100.29"},
      {id:9,first_name:"Alonzo",last_name:"Beardwood",email:"abeardwood8@loc.gov",gender:"Male",ip_address:"110.116.212.242"},
      {id:10,first_name:"Jacky",last_name:"Clyant",email:"jclyant9@earthlink.net",gender:"Male",ip_address:"55.126.158.104"},
    ],
    stickyHeader:false
  }} argTypes={{
    headers: {table: {disable: true}},
    data: {table: {disable: true}},
    rows: {table: {disable: true}}
  }}>
    {TableTemplate.bind({})}
  </Story>
</Canvas>

# Default Selected Value

To pre-select a row or rows upon initialization, provide the `selected` attribute with the ID(s) of the row(s) to be selected by default. This is useful for situations where certain rows need to be highlighted as selected when the table is first rendered.

<Canvas>
  <Story name="Default Selected Value" args={{
    selectable: true,
    multiple: true,
    sortable: false,
    stickyFirstColumn: false,
    stickyLastColumn: false,
    selectValue: ["row-1","row-4"],
    headers: [
      {key: "id", sortKey: "id", text: "ID", minWidth: '100px', sticky:'left'},
      {key: "first_name", sortKey: "first_name", text: "First Name", minWidth: "200px"},
      {key: "last_name", sortKey: "last_name", text: "Last Name", minWidth: "200px"},
      {key: "email", text: "Email", minWidth: "250px"},
      {key: "gender", text: "Gender", minWidth: '200px'},
      {key: "ip_address", text: "IP Address", width: '90px', sticky: 'right'},
    ],
    data: [
      {
        id: 1,
        first_name: "Antonella",
        last_name: "Bellefonte",
        email: "abellefonte0@nba.com",
        gender: "Female",
        ip_address: "193.108.174.118"
      },
      {id:2,first_name:"Wash",last_name:"Carnson",email:"wcarnson1@jalbum.net",gender:"Male",ip_address:"255.169.128.60"},
      {id:3,first_name:"Betteanne",last_name:"Cowgill",email:"bcowgill2@timesonline.co.uk",gender:"Female",ip_address:"235.237.3.233", disabled: true},
      {id:4,first_name:"Lilith",last_name:"Astbury",email:"lastbury3@shinystat.com",gender:"Female",ip_address:"46.41.60.65"},
      {id:5,first_name:"Nikos",last_name:"Vasenkov",email:"nvasenkov4@slate.com",gender:"Male",ip_address:"13.95.130.24"},
      {id:6,first_name:"Drucill",last_name:"Runciman",email:"drunciman5@hc360.com",gender:"Female",ip_address:"185.192.50.41"},
      {id:7,first_name:"Gaspar",last_name:"Falls",email:"gfalls6@howstuffworks.com",gender:"Male",ip_address:"107.51.243.94"},
      {id:8,first_name:"Hilary",last_name:"Izzatt",email:"hizzatt7@java.com",gender:"Male",ip_address:"136.171.100.29"},
      {id:9,first_name:"Alonzo",last_name:"Beardwood",email:"abeardwood8@loc.gov",gender:"Male",ip_address:"110.116.212.242"},
      {id:10,first_name:"Jacky",last_name:"Clyant",email:"jclyant9@earthlink.net",gender:"Male",ip_address:"55.126.158.104"},
    ],
    stickyHeader:false
  }} argTypes={{
    headers: {table: {disable: true}},
    data: {table: {disable: true}},
    rows: {table: {disable: true}}
  }}>
    {TableTemplate.bind({})}
  </Story>
</Canvas>

# Sortable

To enable sorting functionality on a column, assign `sortable`, `sort-key`, and optionally `sort-direction` attributes to `<bl-table-header-cell>`. The sort-key should correspond to the data field associated with the column, and sort-direction can be set to asc or desc to control the initial sorting direction.

<Canvas>
  <Story name="Sortable" args={{
    selectable: false,
    multiple: false,
    sortable: true,
    stickyFirstColumn: false,
    stickyLastColumn: false,
    headers: [
      {key: "id", sortKey: "id", text: "ID", minWidth: '60px', sticky:'left'},
      {key: "first_name", sortKey: "first_name", text: "First Name", minWidth: "200px"},
      {key: "last_name", sortKey: "last_name", text: "Last Name", minWidth: "200px"},
      {key: "email", text: "Email", minWidth: "250px"},
      {key: "gender", text: "Gender", minWidth: '100px'},
      {key: "ip_address", text: "IP Address", width: '90px', sticky: 'right'},
    ],
    selectValue: [],
   data: [
      {
        id: 1,
        first_name: "Antonella",
        last_name: "Bellefonte",
        email: "abellefonte0@nba.com",
        gender: "Female",
        ip_address: "193.108.174.118"
      },
      {id:2,first_name:"Wash",last_name:"Carnson",email:"wcarnson1@jalbum.net",gender:"Male",ip_address:"255.169.128.60"},
      {id:3,first_name:"Betteanne",last_name:"Cowgill",email:"bcowgill2@timesonline.co.uk",gender:"Female",ip_address:"235.237.3.233", disabled: true},
      {id:4,first_name:"Lilith",last_name:"Astbury",email:"lastbury3@shinystat.com",gender:"Female",ip_address:"46.41.60.65"},
      {id:5,first_name:"Nikos",last_name:"Vasenkov",email:"nvasenkov4@slate.com",gender:"Male",ip_address:"13.95.130.24"},
      {id:6,first_name:"Drucill",last_name:"Runciman",email:"drunciman5@hc360.com",gender:"Female",ip_address:"185.192.50.41"},
      {id:7,first_name:"Gaspar",last_name:"Falls",email:"gfalls6@howstuffworks.com",gender:"Male",ip_address:"107.51.243.94"},
      {id:8,first_name:"Hilary",last_name:"Izzatt",email:"hizzatt7@java.com",gender:"Male",ip_address:"136.171.100.29"},
      {id:9,first_name:"Alonzo",last_name:"Beardwood",email:"abeardwood8@loc.gov",gender:"Male",ip_address:"110.116.212.242"},
      {id:10,first_name:"Jacky",last_name:"Clyant",email:"jclyant9@earthlink.net",gender:"Male",ip_address:"55.126.158.104"},
    ],
    stickyHeader:true,
  }} argTypes={{
    headers: {table: {disable: true}},
    data: {table: {disable: true}},
    rows: {table: {disable: true}}
  }}>
    {TableTemplate.bind({})}
  </Story>
</Canvas>

# Default Sorted Column

To set a column as the default sorted column when the table loads, specify the `sort-key` and `sort-direction` on `<bl-table> `to match the desired column and direction. This sets the initial sort state for the table.

<Canvas>
  <Story name="Default Sorted Column" args={{
    selectable: false,
    multiple: false,
    sortable: true,
    stickyFirstColumn: false,
    stickyLastColumn: false,
    headers: [
      {key: "id", sortKey: "id", text: "ID", minWidth: '60px', sticky:'left'},
      {key: "first_name", sortKey: "first_name", text: "First Name", minWidth: "200px"},
      {key: "last_name", sortKey: "last_name", text: "Last Name", minWidth: "200px"},
      {key: "email", text: "Email", minWidth: "250px"},
      {key: "gender", text: "Gender", minWidth: '100px'},
      {key: "ip_address", text: "IP Address", width: '90px', sticky: 'right'},
    ],
    selectValue: [],
    data: [
      {
        id: 1,
        first_name: "Antonella",
        last_name: "Bellefonte",
        email: "abellefonte0@nba.com",
        gender: "Female",
        ip_address: "193.108.174.118"
      },
      {id:2,first_name:"Wash",last_name:"Carnson",email:"wcarnson1@jalbum.net",gender:"Male",ip_address:"255.169.128.60"},
      {id:3,first_name:"Betteanne",last_name:"Cowgill",email:"bcowgill2@timesonline.co.uk",gender:"Female",ip_address:"235.237.3.233", disabled: true},
      {id:4,first_name:"Lilith",last_name:"Astbury",email:"lastbury3@shinystat.com",gender:"Female",ip_address:"46.41.60.65"},
      {id:5,first_name:"Nikos",last_name:"Vasenkov",email:"nvasenkov4@slate.com",gender:"Male",ip_address:"13.95.130.24"},
      {id:6,first_name:"Drucill",last_name:"Runciman",email:"drunciman5@hc360.com",gender:"Female",ip_address:"185.192.50.41"},
      {id:7,first_name:"Gaspar",last_name:"Falls",email:"gfalls6@howstuffworks.com",gender:"Male",ip_address:"107.51.243.94"},
      {id:8,first_name:"Hilary",last_name:"Izzatt",email:"hizzatt7@java.com",gender:"Male",ip_address:"136.171.100.29"},
      {id:9,first_name:"Alonzo",last_name:"Beardwood",email:"abeardwood8@loc.gov",gender:"Male",ip_address:"110.116.212.242"},
      {id:10,first_name:"Jacky",last_name:"Clyant",email:"jclyant9@earthlink.net",gender:"Male",ip_address:"55.126.158.104"},
    ],
    stickyHeader:true,
    sortKey: 'first_name',
    sortDirection: 'asc'
  }} argTypes={{
    headers: {table: {disable: true}},
    data: {table: {disable: true}},
    rows: {table: {disable: true}}
  }}>
    {TableTemplate.bind({})}
  </Story>
</Canvas>

# Sticky Header

To make the table header sticky, meaning it stays at the top of the table viewport as the user scrolls, use the `sticky` attribute on `<bl-table-header>`.

<Canvas>
  <Story name="Sticky Header" args={{
    selectable: false,
    multiple: false,
    sortable: false,
    stickyFirstColumn: false,
    stickyLastColumn: false,
    headers: [
      {key: "id", sortKey: "id", text: "ID", minWidth: '60px', sticky:'left'},
      {key: "first_name", sortKey: "first_name", text: "First Name", minWidth: "200px"},
      {key: "last_name", sortKey: "last_name", text: "Last Name", minWidth: "200px"},
      {key: "email", text: "Email", minWidth: "250px"},
      {key: "gender", text: "Gender", minWidth: '100px'},
      {key: "ip_address", text: "IP Address", width: '90px', sticky: 'right'},
    ],
    selectValue: [],
    data: [
      {
        id: 1,
        first_name: "Antonella",
        last_name: "Bellefonte",
        email: "abellefonte0@nba.com",
        gender: "Female",
        ip_address: "193.108.174.118"
      },
      {id:2,first_name:"Wash",last_name:"Carnson",email:"wcarnson1@jalbum.net",gender:"Male",ip_address:"255.169.128.60"},
      {id:3,first_name:"Betteanne",last_name:"Cowgill",email:"bcowgill2@timesonline.co.uk",gender:"Female",ip_address:"235.237.3.233", disabled: true},
      {id:4,first_name:"Lilith",last_name:"Astbury",email:"lastbury3@shinystat.com",gender:"Female",ip_address:"46.41.60.65"},
      {id:5,first_name:"Nikos",last_name:"Vasenkov",email:"nvasenkov4@slate.com",gender:"Male",ip_address:"13.95.130.24"},
      {id:6,first_name:"Drucill",last_name:"Runciman",email:"drunciman5@hc360.com",gender:"Female",ip_address:"185.192.50.41"},
      {id:7,first_name:"Gaspar",last_name:"Falls",email:"gfalls6@howstuffworks.com",gender:"Male",ip_address:"107.51.243.94"},
      {id:8,first_name:"Hilary",last_name:"Izzatt",email:"hizzatt7@java.com",gender:"Male",ip_address:"136.171.100.29"},
      {id:9,first_name:"Alonzo",last_name:"Beardwood",email:"abeardwood8@loc.gov",gender:"Male",ip_address:"110.116.212.242"},
      {id:10,first_name:"Jacky",last_name:"Clyant",email:"jclyant9@earthlink.net",gender:"Male",ip_address:"55.126.158.104"},
    ],
    stickyHeader:true
  }} argTypes={{
    headers: {table: {disable: true}},
    data: {table: {disable: true}},
    rows: {table: {disable: true}}
  }}>
    {TableTemplate.bind({})}
  </Story>
</Canvas>

# Sticky First Column

To make the first column of the table sticky, meaning it stays visible at the left side of the table viewport as the user scrolls horizontally, use the `sticky-first-column` attribute on `<bl-table>`.

<Canvas>
  <Story name="Sticky First Column" args={{
    selectable: false,
    multiple: false,
    sortable: false,
    stickyFirstColumn: true,
    stickyLastColumn: false,
    headers: [
      {key: "id", sortKey: "id", text: "ID", minWidth: '100px', sticky:'left'},
      {key: "first_name", sortKey: "first_name", text: "First Name", minWidth: "200px"},
      {key: "last_name", sortKey: "last_name", text: "Last Name", minWidth: "200px"},
      {key: "email", text: "Email", minWidth: "250px"},
      {key: "gender", text: "Gender", minWidth: '200px'},
      {key: "ip_address", text: "IP Address", width: '90px', sticky: 'right'},
    ],
    selectValue: [],
    data: [
      {
        id: 1,
        first_name: "Antonella",
        last_name: "Bellefonte",
        email: "abellefonte0@nba.com",
        gender: "Female",
        ip_address: "193.108.174.118"
      },
      {id:2,first_name:"Wash",last_name:"Carnson",email:"wcarnson1@jalbum.net",gender:"Male",ip_address:"255.169.128.60"},
      {id:3,first_name:"Betteanne",last_name:"Cowgill",email:"bcowgill2@timesonline.co.uk",gender:"Female",ip_address:"235.237.3.233", disabled: true},
      {id:4,first_name:"Lilith",last_name:"Astbury",email:"lastbury3@shinystat.com",gender:"Female",ip_address:"46.41.60.65"},
      {id:5,first_name:"Nikos",last_name:"Vasenkov",email:"nvasenkov4@slate.com",gender:"Male",ip_address:"13.95.130.24"},
      {id:6,first_name:"Drucill",last_name:"Runciman",email:"drunciman5@hc360.com",gender:"Female",ip_address:"185.192.50.41"},
      {id:7,first_name:"Gaspar",last_name:"Falls",email:"gfalls6@howstuffworks.com",gender:"Male",ip_address:"107.51.243.94"},
      {id:8,first_name:"Hilary",last_name:"Izzatt",email:"hizzatt7@java.com",gender:"Male",ip_address:"136.171.100.29"},
      {id:9,first_name:"Alonzo",last_name:"Beardwood",email:"abeardwood8@loc.gov",gender:"Male",ip_address:"110.116.212.242"},
      {id:10,first_name:"Jacky",last_name:"Clyant",email:"jclyant9@earthlink.net",gender:"Male",ip_address:"55.126.158.104"},
    ],
    stickyHeader:false
  }} argTypes={{
    headers: {table: {disable: true}},
    data: {table: {disable: true}},
    rows: {table: {disable: true}}
  }}>
    {TableTemplate.bind({})}
  </Story>
</Canvas>

# Sticky Last Column

Similar to the sticky first column, to make the last column of the table sticky, meaning it stays visible at the right side of the table viewport as the user scrolls horizontally, use the `sticky-last-column` attribute on `<bl-table>`.
<Canvas>
  <Story name="Sticky Last Column" args={{
    selectable: false,
    multiple: false,
    sortable: false,
    stickyFirstColumn: false,
    stickyLastColumn: true,
    headers: [
      {key: "id", sortKey: "id", text: "ID", minWidth: '100px', sticky:'left'},
      {key: "first_name", sortKey: "first_name", text: "First Name", minWidth: "200px"},
      {key: "last_name", sortKey: "last_name", text: "Last Name", minWidth: "200px"},
      {key: "email", text: "Email", minWidth: "250px"},
      {key: "gender", text: "Gender", minWidth: '200px'},
      {key: "ip_address", text: "IP Address", width: '90px', sticky: 'right'},
    ],
    selectValue: [],
   data: [
      {
        id: 1,
        first_name: "Antonella",
        last_name: "Bellefonte",
        email: "abellefonte0@nba.com",
        gender: "Female",
        ip_address: "193.108.174.118"
      },
      {id:2,first_name:"Wash",last_name:"Carnson",email:"wcarnson1@jalbum.net",gender:"Male",ip_address:"255.169.128.60"},
      {id:3,first_name:"Betteanne",last_name:"Cowgill",email:"bcowgill2@timesonline.co.uk",gender:"Female",ip_address:"235.237.3.233", disabled: true},
      {id:4,first_name:"Lilith",last_name:"Astbury",email:"lastbury3@shinystat.com",gender:"Female",ip_address:"46.41.60.65"},
      {id:5,first_name:"Nikos",last_name:"Vasenkov",email:"nvasenkov4@slate.com",gender:"Male",ip_address:"13.95.130.24"},
      {id:6,first_name:"Drucill",last_name:"Runciman",email:"drunciman5@hc360.com",gender:"Female",ip_address:"185.192.50.41"},
      {id:7,first_name:"Gaspar",last_name:"Falls",email:"gfalls6@howstuffworks.com",gender:"Male",ip_address:"107.51.243.94"},
      {id:8,first_name:"Hilary",last_name:"Izzatt",email:"hizzatt7@java.com",gender:"Male",ip_address:"136.171.100.29"},
      {id:9,first_name:"Alonzo",last_name:"Beardwood",email:"abeardwood8@loc.gov",gender:"Male",ip_address:"110.116.212.242"},
      {id:10,first_name:"Jacky",last_name:"Clyant",email:"jclyant9@earthlink.net",gender:"Male",ip_address:"55.126.158.104"},
    ],
    stickyHeader:false
  }} argTypes={{
    headers: {table: {disable: true}},
    data: {table: {disable: true}},
    rows: {table: {disable: true}}
  }}>
    {TableTemplate.bind({})}
  </Story>
</Canvas>

# Table with Pagination

To enable pagination on the table, use the `bl-pagination` component. The `@bl-change` event is used to handle page changes, providing details about the current page and the number of items per page.

<Canvas>
  <Story name="Table with Pagination" args={{
    page: 1,
    perPage: 10,
    selectable: true,
    multiple: true,
    sortable: false,
    stickyFirstColumn: false,
    stickyLastColumn: false,
    headers: [
      {key: "id", sortKey: "id", text: "ID", minWidth: '100px', sticky:'left'},
      {key: "first_name", sortKey: "first_name", text: "First Name", minWidth: "200px"},
      {key: "last_name", sortKey: "last_name", text: "Last Name", minWidth: "200px"},
      {key: "email", text: "Email", minWidth: "250px"},
      {key: "gender", text: "Gender", minWidth: '200px'},
      {key: "ip_address", text: "IP Address", width: '90px', sticky: 'right'},
    ],
    selectValue: [],
    paginationData: [
      {
        id: 1,
        first_name: "Antonella",
        last_name: "Bellefonte",
        email: "abellefonte0@nba.com",
        gender: "Female",
        ip_address: "193.108.174.118"
      },
      {id:2,first_name:"Wash",last_name:"Carnson",email:"wcarnson1@jalbum.net",gender:"Male",ip_address:"255.169.128.60"},
      {id:3,first_name:"Betteanne",last_name:"Cowgill",email:"bcowgill2@timesonline.co.uk",gender:"Female",ip_address:"235.237.3.233", disabled: true},
      {id:4,first_name:"Lilith",last_name:"Astbury",email:"lastbury3@shinystat.com",gender:"Female",ip_address:"46.41.60.65"},
      {id:5,first_name:"Nikos",last_name:"Vasenkov",email:"nvasenkov4@slate.com",gender:"Male",ip_address:"13.95.130.24"},
      {id:6,first_name:"Drucill",last_name:"Runciman",email:"drunciman5@hc360.com",gender:"Female",ip_address:"185.192.50.41"},
      {id:7,first_name:"Gaspar",last_name:"Falls",email:"gfalls6@howstuffworks.com",gender:"Male",ip_address:"107.51.243.94"},
      {id:8,first_name:"Hilary",last_name:"Izzatt",email:"hizzatt7@java.com",gender:"Male",ip_address:"136.171.100.29"},
      {id:9,first_name:"Alonzo",last_name:"Beardwood",email:"abeardwood8@loc.gov",gender:"Male",ip_address:"110.116.212.242"},
      {id:10,first_name:"Jacky",last_name:"Clyant",email:"jclyant9@earthlink.net",gender:"Male",ip_address:"55.126.158.104"},
      {id:11,first_name:"Marge",last_name:"Hawthorn",email:"mhawthorn10@google.com",gender:"Female",ip_address:"192.168.1.1"},
      {id:12,first_name:"John",last_name:"Doe",email:"jdoe11@example.com",gender:"Male",ip_address:"192.168.1.2"},
      {id:13,first_name:"Jane",last_name:"Smith",email:"jsmith12@example.com",gender:"Female",ip_address:"192.168.1.3"},
      {id:14,first_name:"Alice",last_name:"Johnson",email:"ajohnson13@example.com",gender:"Female",ip_address:"192.168.1.4"},
      {id:15,first_name:"Bob",last_name:"Brown",email:"bbrown14@example.com",gender:"Male",ip_address:"192.168.1.5"},
      {id:16,first_name:"Charlie",last_name:"Davis",email:"cdavis15@example.com",gender:"Male",ip_address:"192.168.1.6"},
      {id:17,first_name:"David",last_name:"Evans",email:"devans16@example.com",gender:"Male",ip_address:"192.168.1.7"},
      {id:18,first_name:"Eve",last_name:"Foster",email:"efoster17@example.com",gender:"Female",ip_address:"192.168.1.8"},
      {id:19,first_name:"Frank",last_name:"Green",email:"fgreen18@example.com",gender:"Male",ip_address:"192.168.1.9"},
      {id:20,first_name:"Grace",last_name:"Harris",email:"gharris19@example.com",gender:"Female",ip_address:"192.168.1.10"},
      {id:21,first_name:"Hank",last_name:"Ivy",email:"hivy20@example.com",gender:"Male",ip_address:"192.168.1.11"},
      {id:22,first_name:"Ivy",last_name:"Jones",email:"ijones21@example.com",gender:"Female",ip_address:"192.168.1.12"},
      {id:23,first_name:"Jack",last_name:"King",email:"jking22@example.com",gender:"Male",ip_address:"192.168.1.13"},
      {id:24,first_name:"Karen",last_name:"Lewis",email:"klewis23@example.com",gender:"Female",ip_address:"192.168.1.14"},
      {id:25,first_name:"Larry",last_name:"Moore",email:"lmoore24@example.com",gender:"Male",ip_address:"192.168.1.15"},
      {id:26,first_name:"Mona",last_name:"Nelson",email:"mnelson25@example.com",gender:"Female",ip_address:"192.168.1.16"},
      {id:27,first_name:"Nate",last_name:"Owens",email:"nowens26@example.com",gender:"Male",ip_address:"192.168.1.17"},
      {id:28,first_name:"Olivia",last_name:"Parker",email:"oparker27@example.com",gender:"Female",ip_address:"192.168.1.18"},
      {id:29,first_name:"Paul",last_name:"Quinn",email:"pquinn28@example.com",gender:"Male",ip_address:"192.168.1.19"},
      {id:30,first_name:"Quincy",last_name:"Reed",email:"qreed29@example.com",gender:"Male",ip_address:"192.168.1.20"},
      {id:31,first_name:"Rachel",last_name:"Smith",email:"rsmith30@example.com",gender:"Female",ip_address:"192.168.1.21"},
      {id:32,first_name:"Sam",last_name:"Taylor",email:"staylor31@example.com",gender:"Male",ip_address:"192.168.1.22"},
      {id:33,first_name:"Tina",last_name:"Upton",email:"tupton32@example.com",gender:"Female",ip_address:"192.168.1.23"},
      {id:34,first_name:"Uma",last_name:"Vance",email:"uvance33@example.com",gender:"Female",ip_address:"192.168.1.24"},
      {id:35,first_name:"Victor",last_name:"White",email:"vwhite34@example.com",gender:"Male",ip_address:"192.168.1.25"},
      {id:36,first_name:"Wendy",last_name:"Xavier",email:"wxavier35@example.com",gender:"Female",ip_address:"192.168.1.26"},
      {id:37,first_name:"Xander",last_name:"Young",email:"xyoung36@example.com",gender:"Male",ip_address:"192.168.1.27"},
      {id:38,first_name:"Yara",last_name:"Zimmerman",email:"yzimmerman37@example.com",gender:"Female",ip_address:"192.168.1.28"},
      {id:39,first_name:"Zane",last_name:"Adams",email:"zadams38@example.com",gender:"Male",ip_address:"192.168.1.29"},
      {id:40,first_name:"Amy",last_name:"Baker",email:"abaker39@example.com",gender:"Female",ip_address:"192.168.1.30"},
    ],
    stickyHeader:false
  }} argTypes={{
    headers: {table: {disable: true}},
    data: {table: {disable: true}},
    rows: {table: {disable: true}}
  }}>
    {TableWithPaginationTemplate.bind({})}
  </Story>
</Canvas>

# No Data Slot

When there are no rows in the table, you can display custom content using the "no-data" slot. This slot appears automatically when no `bl-table-row` elements are present in the table body. If no custom slot is provided, a default no-data message will be displayed.

export const EmptyTableTemplate = (args) => html`
  <div style="height: 400px;">
    <bl-table>
      <bl-table-header sticky>
        <bl-table-row>
          <bl-table-header-cell>ID</bl-table-header-cell>
          <bl-table-header-cell>Name</bl-table-header-cell>
          <bl-table-header-cell>Email</bl-table-header-cell>
          <bl-table-header-cell>Status</bl-table-header-cell>
        </bl-table-row>
      </bl-table-header>
      <bl-table-body>
        ${args.showNoDataSlot ? html`
          <div slot="no-data">
            <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 200px;">
              <bl-icon name="archive" style="font-size: 32px; margin-bottom: var(--bl-size-l); color: var(--bl-color-primary);"></bl-icon>
              <p style="margin: 0; font: var(--bl-font-title-2-medium); color: var(--bl-color-neutral-darker);">Custom Empty State</p>
              <p style="margin: var(--bl-size-xs) 0 0 0; font: var(--bl-font-body-text-2); color: var(--bl-color-neutral-light);">This is a custom no-data slot implementation.</p>
              <bl-button style="margin-top: var(--bl-size-l);">
                Add New Item
              </bl-button>
            </div>
          </div>
        ` : ''}
      </bl-table-body>
    </bl-table>
  </div>
`;

<Canvas>
  <Story name="Table with No Data Slot" args={{ showNoDataSlot: true }}>
    {EmptyTableTemplate.bind({})}
  </Story>
</Canvas>

## Empty Table Without No Data Slot

If no "no-data" slot is provided, the table displays a default no-data message with a standard design.

<Canvas>
  <Story name="Empty Table Without Slot" args={{ showNoDataSlot: false }}>
    {EmptyTableTemplate.bind({})}
  </Story>
</Canvas>

# RTL Support

The table component supports RTL (Right-to-Left) text direction. You can enable RTL mode by setting the `dir` attribute on a parent element or the `html` tag.

<Canvas>
  <Story name="RTL Support">
    {() => html`
      <div style="display: flex; gap: 32px;">
        <div style="flex: 1;">
          <p style="margin-bottom: 8px;">LTR (Left-to-Right)</p>
          <div style="height: 400px;">
            <bl-table>
              <bl-table-header sticky>
                <bl-table-row>
                  <bl-table-header-cell>ID</bl-table-header-cell>
                  <bl-table-header-cell>Name</bl-table-header-cell>
                  <bl-table-header-cell>Email</bl-table-header-cell>
                </bl-table-row>
              </bl-table-header>
              <bl-table-body>
                <bl-table-row>
                  <bl-table-cell>1</bl-table-cell>
                  <bl-table-cell>John Doe</bl-table-cell>
                  <bl-table-cell>john@example.com</bl-table-cell>
                </bl-table-row>
                <bl-table-row>
                  <bl-table-cell>2</bl-table-cell>
                  <bl-table-cell>Jane Smith</bl-table-cell>
                  <bl-table-cell>jane@example.com</bl-table-cell>
                </bl-table-row>
              </bl-table-body>
            </bl-table>
          </div>
        </div>
        <div style="flex: 1;" dir="rtl">
          <p style="margin-bottom: 8px;">RTL (Right-to-Left)</p>
          <div style="height: 400px;">
            <bl-table>
              <bl-table-header sticky>
                <bl-table-row>
                  <bl-table-header-cell>رقم الهوية</bl-table-header-cell>
                  <bl-table-header-cell>الاسم</bl-table-header-cell>
                  <bl-table-header-cell>البريد الإلكتروني</bl-table-header-cell>
                </bl-table-row>
              </bl-table-header>
              <bl-table-body>
                <bl-table-row>
                  <bl-table-cell>١</bl-table-cell>
                  <bl-table-cell>جون دو</bl-table-cell>
                  <bl-table-cell>john@example.com</bl-table-cell>
                </bl-table-row>
                <bl-table-row>
                  <bl-table-cell>٢</bl-table-cell>
                  <bl-table-cell>جين سميث</bl-table-cell>
                  <bl-table-cell>jane@example.com</bl-table-cell>
                </bl-table-row>
              </bl-table-body>
            </bl-table>
          </div>
        </div>
      </div>
    `}
  </Story>
</Canvas>

Here's a vanilla JavaScript and HTML example of how to use RTL support:

```html
<!-- index.html -->
<html>
<head>
  <meta charset="UTF-8">
  <title>Baklava Table RTL Example</title>
  <!-- Import Baklava's CSS and JavaScript -->
  <script type="module" src="path/to/baklava.js"></script>
  <style>
    .container {
      margin: 20px;
    }
    .flex-container {
      display: flex;
      gap: 32px;
    }
    .table-container {
      flex: 1;
      height: 400px;
    }
  </style>
</head>
<body>
  <div class="container">
    <button onclick="toggleDirection()">Toggle RTL/LTR</button>

    <div class="flex-container">
      <!-- LTR Example -->
      <div class="table-container">
        <h3>LTR Table</h3>
        <bl-table>
          <bl-table-header sticky>
            <bl-table-row>
              <bl-table-header-cell>ID</bl-table-header-cell>
              <bl-table-header-cell>Name</bl-table-header-cell>
              <bl-table-header-cell>Email</bl-table-header-cell>
            </bl-table-row>
          </bl-table-header>
          <bl-table-body>
            <bl-table-row>
              <bl-table-cell>1</bl-table-cell>
              <bl-table-cell>John Doe</bl-table-cell>
              <bl-table-cell>john@example.com</bl-table-cell>
            </bl-table-row>
          </bl-table-body>
        </bl-table>
      </div>

      <!-- RTL Example -->
      <div class="table-container" dir="rtl">
        <h3>RTL Table</h3>
        <bl-table>
          <bl-table-header sticky>
            <bl-table-row>
              <bl-table-header-cell>رقم الهوية</bl-table-header-cell>
              <bl-table-header-cell>الاسم</bl-table-header-cell>
              <bl-table-header-cell>البريد الإلكتروني</bl-table-header-cell>
            </bl-table-row>
          </bl-table-header>
          <bl-table-body>
            <bl-table-row>
              <bl-table-cell>١</bl-table-cell>
              <bl-table-cell>جون دو</bl-table-cell>
              <bl-table-cell>john@example.com</bl-table-cell>
            </bl-table-row>
          </bl-table-body>
        </bl-table>
      </div>
    </div>
  </div>

  <script>
    // Example of dynamically changing direction
    const toggleDirection = () => {
      const rtlContainer = document.querySelector('[dir="rtl"]');
      rtlContainer.dir = rtlContainer.dir === 'rtl' ? 'ltr' : 'rtl';
    };
  </script>
</body>
</html>
```

## Reference
### bl-table
<ArgsTable of="bl-table"/>
___
### bl-table-header
<ArgsTable of="bl-table-header"/>
___
### bl-table-body
There is no prop or css properties for `bl-table-body`.
___
### bl-table-row
<ArgsTable of="bl-table-row"/>
___
### bl-table-header-cell
<ArgsTable of="bl-table-header-cell"/>
___
### bl-table-cell
<ArgsTable of="bl-table-cell"/>
___
